<template>
  <view class="container">
    <view
      style="
        margin: 39rpx 0 40rpx 39rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #333333;
      "
    >
      {{ `请选择${title}的菜品` }}
    </view>

    <view
      class="info"
      style="
        width: 710rpx;
        margin-left: 20rpx;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
        border-radius: 18rpx;
        padding: 0 21rpx;
        border-bottom: 1px solid #ededed;
      "
    >
      <view class="dish-list">
        <view
          v-for="(food, index) of cart"
          :key="index"
          style="height: 90rpx; display: flex; align-items: center"
        >
          <li-checksingle
            v-model="food.isPack"
            :txt="food.name + getSpec(food)"
            style="flex: 1"
          ></li-checksingle>

          <view style="display: flex; align-items: center; height: 48rpx">
            x{{ food.nums }}
          </view>
        </view>
      </view>
    </view>

    <view class="bottom-btn" style="padding-left: 40rpx; padding-right: 30rpx">
      <view
        style="
          margin-top: 20rpx;
          height: 90rpx;
          display: flex;
          align-items: center;
        "
      >
        <li-checksingle
          v-model="isAll"
          txt="全选"
          v-on:change="afterAllClick"
        ></li-checksingle>
        <view>已选择1项菜品</view>
        <view
          style="
            width: 300rpx;
            height: 90rpx;
            line-height: 90rpx;
            background: linear-gradient(135deg, #fbc960, #f0b947);
            box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
            border-radius: 45rpx;
            font-weight: bold;
            font-size: 30rpx;
            color: #111111;
            text-align: center;
          "
          >确认</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import {
  uGetStorageSync,
  uSetNavigationBarTitle,
} from "../../../utils/uniUtils";
import LiChecksingle from "../../../components/li-checksingle/li-checksingle.vue";

export default {
  components: {
    LiChecksingle,
  },
  data() {
    return {
      title: "",
      hh: false,
      cart: [],
      deskId: null,
      orderId: null,
      isAll: false,
    };
  },
  async onLoad(opt) {
    this.deskId = opt.deskid;
    this.orderId = opt.orderid;
    this.type = opt.type;
    this.cart = uGetStorageSync("order" + this.orderId) || [];
    console.log("opt :>> ", opt);
    this.setTitle(this.type);
  },
  watch: {
    cart(val) {},
  },

  methods: {
    setTitle(type) {
      if (type == "0") {
        this.title = "打包";
      }

      uSetNavigationBarTitle(this.title);
    },
    getSpec(food) {
      if (food.specFlag) {
        let arr = [];
        let { specList, feedList, taskList } = food.materials;
        if (specList) {
          specList.forEach((element) => {
            arr.push(element.specName);
          });
        }
        if (feedList) {
          feedList.forEach((element) => {
            arr.push(element.name);
          });
        }
        if (taskList) {
          taskList.forEach((element) => {
            arr.push(element.name);
          });
        }
        return " (" + arr.join("、") + ")";
      }

      return "";
    },
    afterAllClick() {
      console.log("this.isAll :>> ", this.isAll);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f7f7f7;
  padding-bottom: 170rpx;
  overflow: scroll;
}

.bottom-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 170rpx;
  background: #ffffff;
  box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(4, 0, 0, 0.04);
  border-radius: 0rpx;
}
</style>
